<template>
  <div class="main">
    <div class="outDiv">
      <go-back  :white='true' topTitle="我的消息" :hasTitle="true"></go-back>
      <div class="tabWrap">
        <tab :line-width="8" default-color="#222" class="tabItem">
          <tab-item @on-item-click="onItemClick" selected>院校动态</tab-item>
        </tab>
      </div>
      <div v-if="!noData">
        <scroller ref='scrollerBottom' style="top: 0.88rem;" :on-refresh="refresh" :on-infinite="infinite" refresh-layer-color="@mainColor"
        loading-layer-color="@mainColor">
          <svg class="spinner" style="stroke:@mainColor;" slot="refresh-spinner" viewBox="0 0 64 64">
            <g stroke-width="7" stroke-linecap="round">
              <line x1="10" x2="10" y1="27.3836" y2="36.4931">
                <animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate>
                <animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate>
                <animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate>
              </line>
              <line x1="24" x2="24" y1="18.6164" y2="45.3836">
                <animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate>
                <animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate>
                <animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate>
              </line>
              <line x1="38" x2="38" y1="16.1233" y2="47.8767">
                <animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate>
                <animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate>
                <animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate>
              </line>
              <line x1="52" x2="52" y1="16" y2="48">
                <animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate>
                <animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate>
                <animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate>
              </line>
            </g>
          </svg>
          <div class="scrollerDiv">
            
            <ul class="msgList">
              <li class="msgItem" v-for="(item, index) of schoolMsgList" :key="index" @click="jumpIntoDetail(item.id)">
                <div class="topIntroduce">
                  <div class="title">{{ item.academyName }}</div>
                  <div class="time">{{ (new Date(item.createTime)).format('yyyy-MM-dd hh:mm') }}</div>
                </div>
                <div class="content">{{ item.title }}</div>
              </li>
            </ul>

          </div>
          <div style="width: 7.5rem;height: 0.5rem;"></div>
        </scroller>
      </div>
      <div v-else>
        <div class="noDataImage">
          <img src="~/static/nothing/empty_message.png" alt="">
          <div class="describe">没有您的消息</div>
        </div>
      </div>
    </div>
    <SchoolNewsDetail ref="schoolNewsDetail" :showPop="showPop" @closePop="closePopup"></SchoolNewsDetail>
  </div>  
</template>

<script>
import goBack from '~/components/goBack'
import SchoolNewsDetail from '~/components/SchoolNewsDetail'
import { messageList } from "~/api/identity";
import {format} from '~/plugins/filter';
import { Tab, TabItem } from 'vux'

export default {
  components: {
    goBack,
    Tab,
    TabItem,
    SchoolNewsDetail
  },
  data() {
    return {
      listData: [], // 公共中间缓存区数组
      choItem: 0,
      schoolPagination: { // 院校动态分页
        pageNo: 1,
        pageSize: 10,
      },
      schoolMsgList: [],
      showPop: false,
      noData: true
    }
  },
  mounted() {
    this.$visit("MyMessage")
    this.getSchoolMsgList();
  },
  methods: {
    jumpIntoDetail(id) {
      this.showPop = true;
      this.$refs.schoolNewsDetail.getNewsDetail(id);
    },
    closePopup(data) {
      this.showPop = data;
    },
    onItemClick(item) {
      this.choItem = item;
      this.listData = [];
    },
    getSchoolMsgList() {
      this.$loading('open')
      messageList(this.schoolPagination). then(res => {
        if (res.code == 0) {
          const data = res.data;
          this.listData = data.list || [];
          if (this.schoolPagination.pageNo == 1) {
            this.schoolMsgList = data.list || [];
            if (this.schoolMsgList.length > 0) {
              this.noData = false
            } else {
              this.noData = true
            }
          } else {
            this.listData.forEach(item => {
                this.schoolMsgList.push(item);
            })
          }
        }
        this.onFetching = false
      }).catch(error => {
        this.$vux.toast.text('网络故障，请稍后重试~');
      }).finally(() => {
        this.$hideLoading()
      })
    },

    refresh(done) {
      // 选择'院校动态'
      if (this.choItem == 0) {
        setTimeout(() => {
          this.schoolMsgList = [];
          this.schoolPagination.pageNo = 1;
          this.getSchoolMsgList()
          done()
        },2000)
      }
    },
    infinite(done) {
      if (this.onFetching) {
        // do nothing
        if (this.listData.length === 0) {
          setTimeout(() => {
            done(true)
          }, 50)
          return;
        }
      } else {
        this.onFetching = true
        setTimeout(() => {
          if (this.listData.length === 0) {
            setTimeout(() => {
              done(true)
            }, 50)
            return;
          }
          this.$nextTick(() => {
            this.schoolPagination.pageNo += 1
            this.getSchoolMsgList()

            setTimeout(() => {
              this.onFetching = false
              done()
            })

          })
          // this.onFetching = false
        }, 1000)
      }
    },

  },
}
</script>

<style lang="less" scoped>
  .outDiv {
    width: 100%;
    background: #FFF;
    height: 100vh;

    .tabWrap {
      height: 1.03rem;
      position: absolute;
      background: #fff;
      z-index: 10;
      width: 100%;
      padding: 0 1rem;
      padding: 0 0.3rem;
      box-sizing: border-box;
      border-bottom: 1px solid #E5E8ED;
  
      .vux-tab .vux-tab-item {
        background: #fff;
        font-size: 0.3rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: #222;
      }

      .tabItem {
        width: 1.5rem;
      }
      /deep/ .vux-tab .vux-tab-ink-bar {
        width: 0.48rem;
        background: @mainColor !important;
        margin: 0 auto;
        border-radius: 4px;
      }


    }
    /deep/ .pull-to-refresh-layer {
      margin-top: 0 !important;
    }

    .scrollerDiv {
      padding-top: 0.5rem;

      .msgList {
        list-style: none;
        padding: 0 0.3rem;

        .msgItem {
          padding: 0.32rem 0;
          border-bottom: 1px solid #E5E8ED;

          .topIntroduce {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 0.44rem;
            margin-bottom: 0.16rem;

            .title {
              color: #222;
              font-size: 0.3rem;
              font-weight: bold;
            }

            .time {
              color: #999;
              font-size: 0.26rem;
            }

          }

          .content {
            color: #999;
            font-size: 0.28rem;
            line-height: 0.48rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

        }

      }

    }

    .noDataImage {
      text-align: center;
      padding-top: 2.4rem;
      img {
        width: 2.4rem;
        height: 2.4rem;
        margin-bottom: 0.24rem;
      }
      .describe {
        color: #999;
        font-size: 0.28rem;
        line-height: 0.4rem;
      }
    }

  }
</style>
